<template>
  <div class="articles-container">
    <el-card shadow="never">
      <!-- 搜索 -->
      <div class="header">
        <el-form
          :inline="true"
          :model="requestParameters"
          class="demo-form-inline"
          ref="requestParameters"
        >
          <div class="filter-container">
            <el-form-item prop="title" label="关键字">
              <el-input
                v-model.trim="requestParameters.title"
                placeholder="根据文章标题搜索"
              ></el-input>
            </el-form-item>
            <el-form-item prop="state" label="状态">
              <el-select v-model="requestParameters.state" placeholder="请选择">
                <el-option label="启用" value="启用"></el-option>
                <el-option label="禁用" value="禁用"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button
                style="margin-left: 15px"
                class="filter-item"
                size="small"
                @click="clearForm"
              >
                {{ $t('table.clearSearch') }}
              </el-button>
              <el-button
                class="filter-item"
                size="small"
                type="primary"
                @click="handleFilter"
                >{{ $t('table.search') }}</el-button
              >
            </el-form-item>
            <el-button
              style="float: rigth"
              class="filter-item fr"
              size="small"
              @click="handleCreate"
              type="success"
              icon="el-icon-edit"
              >新增技巧</el-button
            >
          </div>
        </el-form>
        <el-alert
          v-if="alertText !== ''"
          :title="alertText"
          type="info"
          class="alert"
          :closable="false"
          show-icon
        ></el-alert>
      </div>
      <el-table :data="artList" stripe style="width: 100%">
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="文章标题" prop="title">
          <template #default="{ row }">
            <span
              >{{ row.title
              }}<i
                v-if="row.videoURL"
                @click="seeVideo(row)"
                class="el-icon-film"
              ></i
            ></span>
          </template>
        </el-table-column>
        <el-table-column label="阅读人数" prop="visits"></el-table-column>
        <el-table-column label="录入人" prop="username"></el-table-column>
        <el-table-column label="录入时间" prop="createTime">
          <template #default="{ row }">
            <span>{{ row.createTime | parseTimeByString }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" prop="state">
          <template #default="{ row }">
            <span>{{ row.state == 0 ? '禁用' : '启用' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button @click="preView(row)" type="text">预览</el-button>
            <el-button @click="getGhangState(row)" type="text">
              <span>{{ row.state == 0 ? '启用' : '禁用' }}</span></el-button
            >
            <el-button
              :disabled="row.state == 0 ? true : false"
              type="text"
              @click="clickEdit(row)"
            >
              修改</el-button
            >
            <el-button
              :disabled="row.state == 0 ? true : false"
              @click="clickDel(row)"
              type="text"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <PageTool
          :paginationPage="requestParameters.page"
          :paginationPagesize="requestParameters.pagesize"
          :total="total"
          @pageChange="handleCurrentChange"
          @pageSizeChange="handleSizeChange"
        ></PageTool>
      </div>
    </el-card>
    <el-dialog
      :visible.sync="adddialogVisible"
      :title="showTitle"
      width="50%"
      @closed="handleClose"
    >
      <el-form
        :model="artForm"
        :rules="artRules"
        ref="artForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="活动名称" prop="title">
          <el-input v-model="artForm.title"></el-input>
        </el-form-item>
        <el-form-item prop="articleBody" label="文章内容">
          <!-- 使用 v-model 进行双向的数据绑定 -->
          <quill-editor
            class="quill"
            v-model="artForm.articleBody"
            @blur="$refs.artForm.validateField(' articleBody')"
          ></quill-editor>
        </el-form-item>
        <el-form-item label="视频地址" prop="videoURL">
          <el-input v-model.trim="artForm.videoURL"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">确认</el-button>
          <el-button @click="handleClose">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 预览 -->
    <el-dialog
      @close="handleClose"
      title="预览文章"
      :visible.sync="previewdialogVisible"
    >
      <div class="title">
        <h2>{{ detail.title }}</h2>
        <div>
          <span>{{ detail.createTime | parseTimeByString }}</span
          ><span style="margin: 0px 5px">超级管理员</span>
          <span
            ><i class="el-icon-view"></i>
            <span style="margin-left: 5px">{{ detail.visits }}</span>
          </span>
        </div>
        <el-divider></el-divider>
        <div class="content">
          <div v-html="detail.articleBody"></div>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      title="视频"
      modal
      center
      width="70%"
      :visible.sync="videoDialogVisible"
    >
      <LookVideo v-if="videoDialogVisible" :viewUrl="viewUrl" />
    </el-dialog>
  </div>
</template>
<script>
import LookVideo from '../components/LookVideo.vue'
import PageTool from '../components/PageTool.vue'
import {
  list,
  add,
  update,
  remove,
  changeState,
  detail
} from '@/api/hmmm/articles'

export default {
  name: 'articles',
  components: { PageTool, LookVideo },
  data () {
    return {
      videoDialogVisible: false,
      viewUrl: '',
      detail: {},
      artForm: {
        title: '',
        videoURL: '',
        articleBody: ''
      },
      previewdialogVisible: false,
      adddialogVisible: false,
      total: '',
      alertText: '',
      artList: [],
      requestParameters: {
        page: 1,
        pagesize: 10
      },
      artRules: {
        title: [
          { required: true, message: '请输入活动标题', trigger: 'blur' },
          {
            min: 1,
            max: 30,
            message: '文章标题长度为 1~30 个字符',
            trigger: 'blur'
          }
        ],
        articleBody: [
          { required: true, message: '请输入活动内容', trigger: 'change' }
        ]
      }
    }
  },
  computed: {
    showTitle () {
      return this.artForm.id ? '修改文章' : '新增文章'
    }
  },
  created () {
    this.getArtList()
  },
  methods: {
    handleClose () {
      this.adddialogVisible = false
      if (this.$refs.artForm) {
        this.$refs.artForm.resetFields()
        this.artForm = {
          title: '',
          videoURL: '',
          articleBody: '',
          id: ''
        }
        console.log(999, this.artForm)
      }
      console.log(this.artForm)
    },
    // 每页显示信息条数
    handleSizeChange (val) {
      this.requestParameters.pagesize = val
      if (this.requestParameters.page === 1) {
        this.getArtList(this.requestParameters)
      }
    },
    // 进入某一页
    handleCurrentChange (val) {
      this.requestParameters.page = val
      this.getArtList()
    },
    // 获取文章列表
    async getArtList (params) {
      const { data: res } = await list(this.requestParameters)
      this.artList = res.items
      this.total = res.counts
      this.alertText = `共 ${this.total} 条记录`
      // console.log(res)
    },
    clearForm () {
      this.$refs.requestParameters.resetFields()
    },
    handleFilter () {
      this.requestParameters.page = 1
      this.getArtList(this.requestParameters)
    },
    handleCreate () {
      this.adddialogVisible = true
    },
    async submitForm () {
      this.$refs.artForm.validate(async (val) => {
        if (!val) return

        if (this.artForm.id) {
          await update(this.artForm)
          this.$message.success('修改学科成功')
          // this.adddialogVisible = false
          // this.$refs.artForm.resetFields()
        } else {
          await add(this.artForm)
          this.$message.success('添加成功')
        }
        this.handleClose()
        this.getArtList()
      })
    },
    // 修改
    async clickEdit (row) {
      // console.log(row)
      // this.artForm.id = id
      // this.handleClose()

      this.artForm = { ...row }
      this.adddialogVisible = true
      // console.log(row.state)
    },
    // 删除
    clickDel (row) {
      this.$confirm('确定要删除该?', '温馨提示')
        .then(async () => {
          await remove(row)
          // console.log(data)

          this.$message.success('删除成功')
          this.getArtList()
        })
        .catch(() => {
          // console.log('取消')
        })
    },
    async getGhangState (row) {
      row.state = !row.state
      await changeState(row)
      // console.log(data)
    },
    async preView (row) {
      const { data } = await detail(row)
      this.detail = data
      // console.log(data)
      this.previewdialogVisible = true
    },
    // 播放视频
    seeVideo (row) {
      console.log(row)
      this.viewUrl = row.videoURL
      // console.log('1')
      // console.log(this.viewUrl)
      this.videoDialogVisible = true
    }
  }
}
</script>
<style lang="scss" scoped>
.alert {
  margin: 10px 0px;
}
.quill {
  height: 200px;
  margin-bottom: 120px;
}
.pagination {
  margin-top: 10px; // text-align: right;
}
.el-icon-film {
  padding-left: 10px;
  font-size: 20px;
  color: blue;
}
</style>
